<template>
	<div class="params">
		<el-form
			ref="ruleForm"
			:model="ruleForm"
			class="rule-form"
			:inline="true"
			label-position="left"
		>
			<!-- 功能开关 -->
			<el-row>
				<SwitchToggle
					permissionId="90240057"
					:configData="configData"
					:switchTitle="switchTitle"
					@getTypeValueAddedConfig="getValueAddedConfigByType"
				></SwitchToggle>

				<el-form-item
					prop="feeRate"
					label="手续费"
					label-width="60px"
					style="margin-left: 75px;"
				>
					<el-input
						v-if="isEdit"
						v-model="ruleForm.feeRate"
						style="width: 80px;"
						v-input="{ name: 'int' }"
						:maxlength="2"
					></el-input>
					<span v-else>
						{{ ruleForm.feeRate }}
					</span>
					<span>%</span>
				</el-form-item>
				<el-form-item
					prop="lowerLimit"
					label="打赏下限"
					label-width="70px"
					style="margin-left: 50px;"
				>
					<el-input
						v-if="isEdit"
						v-model="ruleForm.lowerLimit"
						style="width: 120px;"
						v-input="{ name: 'intp' }"
						:maxlength="9"
					></el-input>
					<span v-else>
						{{ ruleForm.lowerLimit }}
					</span>
				</el-form-item>
				<el-form-item prop="forcePay" style="margin-left: 50px;">
					<div class="force-pay-show">
						<div>打赏强制二次</div>
						<div class="header-top-line">确认弹框：</div>
					</div>
					<div class="force-pay-show">
						<div>金额</div>
						<div class="header-top-line">>=</div>
					</div>
					<el-input
						v-if="isEdit"
						v-model="ruleForm.forcePay"
						style="width: 80px;"
						v-input="{ name: 'int' }"
						:maxlength="6"
					></el-input>
					<span v-else>
						{{ ruleForm.forcePay }}
					</span>
				</el-form-item>
			</el-row>

			<el-form-item label="快捷选项" label-width="120px">
				<el-tag
					v-for="(tag, index) in amountList"
					:key="index"
					:closable="isEdit"
					:disabled="!isEdit"
					:disable-transitions="false"
					class="el-tag-margin"
					@close="handleDeleteBillingType(tag)"
				>
					{{ tag }}
				</el-tag>
				<el-input
					v-if="inputVisible"
					v-model="inputValue"
					ref="saveTagInput"
					class="input-new-tag"
					size="small"
					:disabled="btnLoading"
					@keyup.enter.native="handleInputConfirm"
					@blur="handleInputConfirm"
					v-input="{ name: 'intp' }"
					:maxlength="9"
				></el-input>
				<el-button
					v-if="isEdit"
					class="button-new-tag"
					:disabled="btnLoading"
					size="small"
					type="primary"
					@click="showInput"
				>
					{{ $t('dxn.game_rule.add') }}
				</el-button>
			</el-form-item>

			<el-form-item
				v-if="hasPermission('90240057')"
				style="margin-left: 20px;"
			>
				<div v-if="!isEdit">
					<el-button
						type="primary"
						@click="handleConfigEdit"
						size="small"
					>
						{{ $t('dxn.game_rule.edit_btn') }}
					</el-button>
				</div>
				<div v-else>
					<el-button
						type="plain"
						@click="handleConfigCancel"
						size="small"
					>
						{{ $t('dxn.game_rule.cancel_btn') }}
					</el-button>
					<el-button
						type="primary"
						:loading="btnLoading"
						@click="handleConfigSubmit"
						size="small"
					>
						{{ $t('dxn.game_rule.save_btn') }}
					</el-button>
				</div>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
import list from '@/mixins/list'
import SwitchToggle from '@/views/dxn/serviceManager/components/SwitchToggle'
export default {
	components: { SwitchToggle },
	mixins: [list],
	props: {
		switchTitle: {
			type: String,
			default: ''
		},
		configItem: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			inputValue: '',
			inputVisible: false,
			btnLoading: false,
			isEdit: false,
			disabled: true,
			configData: {
				configId: 0,
				configStatus: 0
			},
			ruleForm: {
				feeRate: undefined,
				lowerLimit: undefined,
				amount: undefined,
				forcePay: undefined
			},
			amountList: []
		}
	},
	watch: {
		configItem: {
			handler(val) {
				if (val?.configId) {
					this.configData = {
						configId: this.configItem.configId,
						configStatus: this.configItem.configStatus || 0
					}
					this.setDefaultRuleForm()
				}
			},
			immediate: true
		}
	},
	methods: {
		setDefaultRuleForm() {
			this.ruleForm = {
				feeRate: this.configItem.feeRate,
				lowerLimit: this.configItem.lowerLimit,
				amount: this.configItem.amount,
				forcePay: this.configItem.forcePay
			}
			this.amountList = this.configItem.amount.split('|')
		},
		showInput() {
			this.inputVisible = true
			this.$nextTick((_) => {
				this.$refs.saveTagInput.$refs.input.focus()
			})
		},
		handleDeleteBillingType(tag) {
			if (this.btnLoading) {
				return
			}
			this.amountList.splice(this.amountList.indexOf(tag), 1)
			this.ruleForm.amount = this.amountList.join('|')
		},
		handleInputConfirm() {
			if (this.inputValue === '') {
				this.inputVisible = false
				return
			}
			// 重复值校验
			if (
				this.amountList.find(
					(item) => Number(item) === Number(this.inputValue)
				)
			) {
				this.$message.error(this.$t('dxn.game_rule.already_exists'))
				this.inputVisible = false
				this.inputValue = ''
				return
			}
			if (this.amountList.length >= 8) {
				this.$message.error('最多8项，请删除后再新增')
				this.inputVisible = false
				this.inputValue = ''
				return
			}
			this.amountList.push(this.inputValue)
			this.amountList.sort((a, b) => Number(a) - Number(b))
			this.ruleForm.amount = this.amountList.join('|')
			this.inputVisible = false
			this.inputValue = ''
		},
		getValueAddedConfigByType() {
			this.$emit('getValueAddedConfigByTypes', this.configItem.configType)
		},
		handleConfigEdit() {
			this.isEdit = true
		},
		handleConfigCancel() {
			this.isEdit = false
			this.setDefaultRuleForm()
		},
		handleConfigSubmit() {
			this.$message.closeAll()
			if (!this.configData.configId) {
				this.$message.error(
					this.$t('dxn.service_manager.config_not_exist_tips')
				)
				return
			}
			if (this.ruleForm.feeRate === '') {
				this.$message.error('请输入手续费')
				return
			}
			if (this.ruleForm.lowerLimit === '') {
				this.$message.error('请输入打赏下限')
				return
			}
			if (this.ruleForm.amount === '') {
				this.$message.error('请输入快捷选项')
				return
			}
			if (this.ruleForm.forcePay === '') {
				this.$message.error('请输入打赏强制二次确认弹框金额')
				return
			}
			const valArr = [
				'feeRate' + '_' + this.ruleForm.feeRate,
				'lowerLimit' + '_' + this.ruleForm.lowerLimit,
				'amount' + '_' + this.ruleForm.amount,
				'forcePay' + '_' + this.ruleForm.forcePay
			]
			const params = {
				id: this.configData.configId,
				vals: valArr.join(',')
			}
			this.btnLoading = true
			this.$api
				.updateValueAddedConfigBend(params)
				.then((res) => {
					this.btnLoading = false
					this.isEdit = false
					if (res?.code === 200) {
						this.$message.success(this.$t('common.action_success'))
						this.$emit(
							'getValueAddedConfigByTypes',
							this.configItem.configType
						)
					}
				})
				.catch(() => {
					this.btnLoading = false
				})
		}
	}
}
</script>
<style lang="scss" scoped>
.rule-form {
	margin: 15px 30px;
}
.input-new-tag {
	width: 90px;
}
.el-tag-margin {
	margin-right: 10px;
}
.el-tag-margin:last-of-type {
	margin-right: 15px;
}
.button-new-tag {
	height: 32px;
	line-height: 30px;
	padding-top: 0;
	padding-bottom: 0;
}
.item {
	margin-right: 20px;
	&:last-child {
		margin-right: 0;
	}
}
::v-deep .el-tag .el-icon-close {
	top: -16px;
	right: -18px;
	border: 1px solid #409eff;
}
.force-pay-show {
	display: inline-block;
	margin-right: 30px;
	margin-top: -15px;
}
.header-top-line {
	margin-top: -20px;
}
</style>
